<template lang="pug">
  .picture 
    ul(v-if='list')
      li(v-for='thumb in thumbs')
        router-link(to='/picture')
          img(:src='list.thumb')
          p {{list.title+':&nbsp;'+list.content}}

    
    
</template>
<script>
export default {
  name: 'vpicture',
  props: ['thumbs'],
  data() {
    return {
      url: 'https://www.easy-mock.com/mock/5a17dba3b23118413626a5d2/test/test3',
      list: null,
    }
  },
  created() {
    this.getPicture();
  },
  methods: {
    getPicture() {
      this.$http.get(this.url)
        .then((response) => {
          if (response) {
            console.log(response);
            this.list = response.data.list[0];
          } else {
            console.error('again');
            this.getPicture();
          }
        },(response) => {})
    }
  }

}
</script>
<style lang="scss" scoped>
.picture {
  width: $width;
  ul {
    @extend %figure-box;
    li {
      position: relative;
      height: 24.375rem /* 390/16 */;
      p {
        @extend %figure-caption;
        height: 3.625rem /* 58/16 */;
        line-height: 3.625rem /* 58/16 */;
        text-indent: 16px;
        font-size: 1.5rem /* 24/16 */;
      }
    }
  }
}
</style>
